<script lang='ts' setup>
import { defineProps, reactive, defineEmits, ref } from 'vue'
import { useStore } from '@/store'
import { Check } from '@element-plus/icons-vue'
import Map from '@/components/CesiumMap/index.vue'
import type { ElForm } from 'element-plus'
import type { baseResponse } from '@/api/request'
import { ElMessage } from 'element-plus'
import { savaSolid } from '@/api/map'
type FormInstance = InstanceType<typeof ElForm>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])
const store = useStore()
const areaOption: Array<{ label: string, value: string }> = [{
  label: "蔡甸区",
  value: "0"
}, {
  label: "东西湖区",
  value: "1"
}, {
  label: "汉南区",
  value: "2"
}, {
  label: "黄陂区",
  value: "3"
}, {
  label: "新洲区",
  value: "4"
}, {
  label: "洪山区",
  value: "5"
}, {
  label: "江夏区",
  value: "6"
}, {
  label: "江岸区",
  value: "7"
}, {
  label: "青山区",
  value: "8"
}, {
  label: "江汉区",
  value: "9"
}, {
  label: "硚口区",
  value: "10"
}, {
  label: "武昌区",
  value: "11"
}, {
  label: "汉阳区",
  value: "12"
},]

const ruleFormRef = ref<FormInstance>()
const form = reactive({
  createId: 0,
  name: '',
  areaId: '',
  areaName: '暂无',
  lon: 0,
  lat: 0,
  filePath: ''
})
form.createId = store.$state.id
const rules = reactive({
  name: [
    {
      required: true,
      message: 'Please input Activity name',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 5,
      message: 'Length should be 3 to 5',
      trigger: 'blur',
    },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
})
const getDegree = (e: { lon: number, lat: number }) => {
  form.lon = e.lon
  form.lat = e.lat
}
const boolNoSubmit = ref<boolean>(false)
const saveSolid = async () => {
  const res = await savaSolid(form)
  clearForm()
  if (res.code === "200") {
    ElMessage.success("添加成功")
    emit('update:modelValue', false)
  }
}
const clearForm = () => {
  form.createId = 0
  form.name = ''
  form.areaId = ''
  form.areaName = '暂无'
  form.lon = 0
  form.lat = 0
  form.filePath = ''
}
const submit = () => {
  let keys = Object.keys(form)
  keys.some(item => {
    if (!form[item]) {
      boolNoSubmit.value = true
      ElMessage.error("有参数为空,不满足条件")
      return true
    }
    return false
  })
  if (boolNoSubmit.value) {
    boolNoSubmit.value = false
    return
  }
  form.areaName = areaOption.find(item => item.value === form.areaId)?.label as string
  saveSolid()
  console.log(form)
}
const uploadSucess = (e: baseResponse<string>) => {
  form.filePath = e.data
}
</script>
<template>
  <el-dialog :modelValue="modelValue" width="40%" @update:modelValue="$emit('update:modelValue', $event)">
    <div class="appBackForm-x">
      <el-row style="font-weight: bold;margin-bottom: 1em;">基本信息</el-row>
      <el-form label-position="top" style="width:100%">
        <el-row>
          <el-col :span="18">
            <el-form-item label="点位名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="地区">
              <el-select placeholder="选择区域" v-model="form.areaId" style="width: 100%;">
                <el-option v-for="item in areaOption" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="经度">
              <el-input disabled v-model="form.lon" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="纬度">
              <el-input disabled v-model="form.lat" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上传图片">
              <el-upload :on-success="uploadSucess" :show-file-list="false" class="upload-demo"
                action="http://localhost:9090/files/upload" multiple :limit="3">
                <el-button color="#626aef" plain>上传图片</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="height: 20vh;width: 100%;" sk-flex="row">
        <Map style="width: 50%;" @UpdateDegree="getDegree"></Map>
        <div style="flex: 1;">
          <el-image style="box-sizing: border-box;padding-left: 1em;  width: 90%; height: 100%" :src="form.filePath"
            fit="fill" />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="appBack-from-footer">
        <el-button style="position: relative;left: 2em;" type="default" round @click="submit" :icon="Check">提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-button--default {
  border-color: #4F8AFF;
  color: #4F8AFF;
}

.appBackForm-x {
  box-sizing: border-box;
  height: 55vh;
  padding: 0 4em;
}

.appBack-from-footer {
  width: 100%;
  height: 100%;
  text-align: left;
  box-sizing: border-box;
  padding-left: 5%;
}
</style>